<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport"
          content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="lib/element-ui/index.css">
    <style>
        /**css初始化**/
        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
            margin: 0;
            padding: 0;
            color: inherit;
        }

        body, button, input, select, textarea {
            font: 14px/1.5 tahoma, "微软雅黑", arial, \5b8b\4f53, sans-serif;
            color: inherit;
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: 100%;
            font-weight: normal;
            color: inherit;
        }

        address, cite, dfn, em, var, i, span {
            font-style: normal;
            color: inherit;
        }

        code, kbd, pre, samp {
            font-family: couriernew, courier, monospace;
        }

        small {
            font-size: 12px;
        }

        ul, ol {
            list-style: none;
            color: inherit;
        }

        a {
            text-decoration: none;
            color: inherit;
            font-size: 14px;
        }

        a:hover {
            text-decoration: none;
        }

        sup {
            vertical-align: text-top;
        }

        sub {
            vertical-align: text-bottom;
        }

        legend {
            color: #000;
        }

        fieldset, img {
            border: 0;
        }

        button, input, select, textarea {
            font-size: 100%;
            outline: 0;
        }

        button {
            border: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        input[type="checkbox"], input[type="radio"] {
            vertical-align: middle;
            margin-right: 5px;
            cursor: pointer;
        }

        /* img{max-width:100%;} */
        button, html input[type=button], input[type=reset], input[type=submit] {
            -webkit-appearance: button;
            cursor: pointer;
            outline: 0;
        }

        button[disabled], html input[disabled] {
            cursor: default;
            outline: 0;
        }

        .content {
            width: 100%;
            margin-top: 10%;
            text-align: center;
        }

        .longin-boder {
            width: 80%;
            height: 40px;
            margin: 2rem auto;
            line-height: 40px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            background-color: #efefef;
            overflow: hidden;
        }

        .input {
            width: 100%;
            padding-left: 1rem;
            height: 40px;
            line-height: 40px;
            border: 0;
            color: #333333;
            font-size: 16px;
            background-color: #efefef;
        }

        .button {
            height: 40px;
            width: 80%;
            margin: 3rem auto 0;
            font-size: 16px;
            font-weight: bold;
            line-height: 38px;
            border-radius: 5px;
            color: #ffffff;
            background-color: #37B4CA;

        }

        .button:active {
            background-color: #37a3b9;
        }

        .logo-img {
            width: 5rem;
            height: 5rem;
            border-radius: 5rem;
            overflow: hidden;
        }

        .logo-title {
            font-size: 1.5rem;
            font-weight: bold;
            text-align: center;
            margin: 2rem 0 3rem;
        }
    </style>
    <script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
    <script src="js/util.js"></script>
</head>
<body>
<div class="content" id="login">
    <img src="" alt="" srcset="" class="logo-img" id="loginLogo">
    <div class="logo-title" id="loginText"></div>
    <div class="longin-boder">
        <input class="input" type="text" placeholder="输入用户名" id="username"/>
    </div>
    <!--End用户名输入框-->
    <div class="longin-boder">
        <input class="input" type="password" placeholder="输入密码" id="password"/>
    </div>
    <!--End密码输入框-->
    <div class="button">登录</div>
</div>
<script>
    var keyCode = getQueryString('keyCode');
    $(function () {
        $.ajax({
            type: "GET",
            url: baseurl + 'yesiot/visual/display/login/' + keyCode,
            data: {},
            success: function (e) {
                if (e.resp_code === 0) {
                    $('#loginLogo').attr('src', e.datas.loginLogo);
                    $('#loginText').html(e.datas.loginText);
                }
            }
        });
    });

    function toCode(str) {  //加密字符串
        //定义密钥，36个字母和数字
        var key = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var st = key.length;  //获取密钥的长度
        var a = key.split("");  //把密钥字符串转换为字符数组
        var s = "", b, b1, b2, b3;  //定义临时变量
        for (var i = 0; i < str.length; i++) {  //遍历字符串
            b = str.charCodeAt(i);  //逐个提取每个字符，并获取Unicode编码值
            b1 = b % st;  //求Unicode编码值得余数
            b = (b - b1) / st;  //求最大倍数
            b2 = b % st;  //求最大倍数的于是
            b = (b - b2) / st;  //求最大倍数
            b3 = b % st;  //求最大倍数的余数
            s += a[b3] + a[b2] + a[b1];  //根据余数值映射到密钥中对应下标位置的字符
        }
        return s;  //返回这些映射的字符
    }

    $(".button").click(function () {
        let username = toCode($("#username").val());
        let password = toCode($("#password").val());
        if (username === '' || password === "") {
            alert("请输入用户名和密码！")
            return
        }
        window.open("./show.html?keyCode=" + keyCode + "&text1=" + username + "&text2=" + password, '_self');
    });
</script>
</body>
</html>
